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Bootstrap is the most popular HTML, CSS, and JS framework for 
developing responsive, mobile first projects on the web. 


What is Bootstrap? 


» Bootstrap is the most popular framework for quickly styling your website. 


» Bootstrap lets us skip writing CSS and focus instead on HTML. 


What is Bootstrap? 


CSS Components 
» Grid system » Glyphicons 
» Typography » Navbar 
» Forms » Pagination 
» Buttons » Thumbnails 
» Responsive utilities » 
>. 


What is Bootstrap? 


ο 
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Hello, world! 


This is a simple hero unit, a simple jumbotron-style component for calling 
extra attention to featured content or information. 


Learn more 


Using Bootstrap 


Bootstrap (currently v3.3.5) has a few easy ways to quickly get started, each one appealing 
to a different skill level and use case. Read through to see what suits your particular needs. 


Bootstrap Source code 


Compiled and minified CSS, JavaScript, Source Less, JavaScript, and font files, 


and fonts. No docs or original source files along with our docs. Requires a Less 
are included. compiler and some setup. 


Download Bootstrap 


Sass 


Bootstrap ported from Less to Sass for 
easy inclusion in Rails, Compass, or 
Sass-only projects. 


Download Sass 


Using Bootstrap 


Bootstrap CDN 


The folks over at MaxCDN graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these Bootstrap CDN links. 


«!-- Latest compiled and minified CSS --» Copy 


«link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"» 


N 
«!-- Optional theme --» 
«link rel-"stylesheet" href-"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"» 


«!-- Latest compiled and minified JavaScript --» 
«script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"»«/script» 


Mobile Friendly 


» Bootstrap 3 is mobile friendly by default. 
» Responsive to screen size (assignment 1) 


» Touch screen zooming 


» Add following to your «head» to enable touch zooming. 


«meta name="viewport" content="width=device-width, initial-scale=1"» 


» width=device-width: sets width of page to screen width of the device 


» initial-scale-1: sets initial zoom level when the page is first loaded 


.Container 


<div class-"container"» 


</div> 


» Responsivelv add margins, center, and wrap your content. 


.Container 


» Example 


«body» 


<h1>My First Bootstrap Page</h1> 
«p»This part is inside a .container class.«/p» 
<p>The .container class provides a responsive fixed width container.«/p» 


«/body» 
«/html» 


My First Bootstrap Page 


This part is inside a .container class. 


The .container class provides a responsive fixed width container. 


.Container 


» Example 
«body» 


«div class-"container"» 

<h1>My First Bootstrap Page</h1> 

«p»This part is inside a .container class.«/p» 

«p»The .container class provides a responsive fixed width container.«/p» 
«/div» 


«/body» 


margin 


= 


margin 
DD 


The .container class provides a responsive fixed width container. 


My First Bootstrap Page 


This part is inside a .container class. 


Grid System 


» Bootstrap divides a page into a grid of 12 columns and multiple rows for 
easier positioning of elements. 


» Grid system is responsive and columns will rearrange automatically depending 
on the screen size. 
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Grid System 


Grid options 


See how aspecis of the Bootstrap grid system work across multiple devices with a handy table. 


Grid behavior 
Container width 
Class prefix 

# of columns 
Column width 
Gutter width 
Nestable 
Offsets 


Column ordering 


Extra small devices Small devices Tablets Medium devices 
Phones (<768px) (2768px) Desktops (2992px) 
Horizontal at all times Collapsed to start, horizontal above breakpoints 
None (auto) 750px 970px 

.col-xs- .col-sm- .col-md- 

12 
Auto ~62px ~8 1px 


30px (15px on each side of a column) 
Yes 
Yes 


Yes 


Large devices Desktops 
(21200px) 


1170px 


„col-lg- 


-97px 


Grid System - Basics 


» Place columns inside <div class="row"></div> for each row. 
» Set each column width using class prefixes: 


> .col-xs-“, .col-sm-“, .col-md-“, .col-lg-* 


Example 


Create a row of columns of width 3, 4, and 5. 


<div class="bs-docs-grid"> 
<div class="row show-grid"» 
<div class="col-md-3"».col-md-3«/div» 
«div class="col-md-4"».col-md-4«/div» 
«div class="col-md-5"».col-md-5«/div» 
«/div» 
«/div» 


OU OU 


Grid System - Multiple Devices 


» Sometimes columns are stacked vertically on smaller screens 


» Use col-xs-“, col-sm-“, col-md-' together to set different column widths for 
different screen sizes 


Example 


Allow 2 columns in a row for mobile, 3 for desktop 
<div class="row show-grid"> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div> 
</div> 


On Desktop: 


On Mobile: 


.col-xs-6 .col-md-4 col-xs-6 .col-md-4 


Grid System - Column Resets 


Sometimes at breakpoints, columns may be aligned in wrong places. 


<div class="row show-grid"> 
<div class="col-xs-6 col-sm-3"> 
„col-xs-6 .col-sm-3 
<br> 
Resize your viewport or check it out on your phone for an example. 
</div> 
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3«/div» 
<div class="col-xs-6 col-sm-3"».col-xs-6 .col-sm-3«/div» 
«div class="col-xs-6 col-sm-3"».col-xs-6 .col-sm-3«/div» 
«/div» 


Problem: Correct Output: 


„col-xs-6 .col-sm-3 „col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 .col-xs-6 .col-sm-3 


Resize your viewport or check it out on your phone Resize your viewport or check it out on your phone 
TE. cine coms ο 
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Grid System - Column Resets 


Fix 
<!-- Add the extra clearfix for only the required viewport --> 
«div class="clearfix visible-xs"»«/div» 
» .clearfix clears float CSS attribute 

> visible-xs is one of many responsive utilities 


» clearfix is applied to only mobile devices (visible-xs) 


Grid System - Column Resets 


Fix 


<div class="row"> 
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> Go to next line 


<!-- Add the extra clearfix for only the required viewport --> 
<div class="clearfix visible-xs-block"></div> 


<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> 
</div> 


Responsive utilities 


Available classes 


Use a single or combination of the available classes for toggling content across viewport breakpoints. 


Extra small devices Small devices Medium devices Large devices 


Phones (<768px) Tablets (2768px) Desktops (2992px) Desktops (21200px) 
„visible-xs Visible Hidden Hidden Hidden 
„visible-sm Hidden Visible Hidden Hidden 
„visible-md Hidden Hidden Visible Hidden 
„visible-lg Hidden Hidden Hidden Visible 
.hidden-xs Hidden Visible Visible Visible 
.hidden-sm Visible Hidden Visible Visible 
. hidden-md Visible Visible Hidden Visible 


.hidden-lg Visible Visible Visible Hidden 


Grid System - Offsetting 


col-xs-offset-“ 
col-sm-offset-“ 


col-md-offset-* 


v vy Vv v 


col-lg-offset-* 


Example 


<div class="row show-grid"> 
<div class="col-md-3 col-md-offset-3"».col-md-3 .col-md-offset-3«/div» 
<div class-"col-md-3 col-md-offset-3"».col-md-3 .col-md-offset-3«/div» 
«/div» 


Grid System - Nested columns 


<div class="row"> 
<div class="col-md-9"> 
Level 1: .col-md-9 
<div class="row"> 
<div class="col-md-6"> 
Level 2: .col-md-6 
</div> 
<div class="col-md-6"> 
Level 2: .col-md-6 
</div> 
</div> 
</div> 
</div> 


Nested columns add up to its parent or less 


Typography - Headings 


Supports <h1> to <h6>, same as HTML 


EXAMPLE 


h1. Bootstrap heading 
h2. Bootstrap heading 


h3. Bootstrap heading 


h4. Bootstrap heading 
h5. Bootstrap heading 


h6. Bootstrap heading 


Semibold 36px 


Semibold 30px 


Semibold 24px 


Semibold 18px 


Semibold 14px 


Semibold 12px 


Typography - Alignment 


EXAMPLE 


Left aligned text. 


Center aligned text. 


Justified text. 


«p class-"text-left"»Left aligned text.«/p» 

«p class-"text-center"»Center aligned text.«/p» 
«p class="text-right"»Right aligned text.«/p» 
«p class-"text-justify"»Justified text.«/p» 


Right aligned text. 


Typography - Addresses 


EXAMPLE 


Twitter, Inc. 
795 Folsom Ave, Suite 600 
San Francisco, CA 94107 


Full Name 
first.last@example.com 


<address> 

<strong>Twitter, Inc.</strong><br> 

795 Folsom Ave, Suite 6@@<br> 

San Francisco, CA 94107«br» 

<abbr title="Phone"»P:«/abbr» (123) 456-7890 
</address> 


<address> 

<strong>Full Name</strong><br> 

<a href="mailto:#">first.last@example.com</a> 
</address> 


append <br> to preserve formatting 


Typography - Description 


EXAMPLE 


Description lists 

A description list is perfect for defining terms. 

Euismod 

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. 
Donec id elit non mi porta gravida at eget metus. 

Malesuada porta 

Etiam porta sem malesuada magna mollis euismod. 


«dl» 
<dt>. ..<sae> 
<dd>...</dd> 


«/dl» 


Typography - Horizontal Description 


EXAMPLE 


Description lists A description list is perfect for defining terms. 
Euismod Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit. 
Donec id elit non mi porta gravida at eget metus. 
Malesuada porta Etiam porta sem malesuada magna mollis euismod. 


Felis euismod semp... Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa 
justo sit amet risus. 


«dl class-"dl-horizontal"» 


«dt»...«/dt» 
«dd»...«/dd» 
«/dl» 


Notice truncation for “Felis euismod semp..." 


Glyphicons 


» Bootstrap comes with 200 icons to use, named “glyphicons" 
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Glyphicon Syntax 


» Syntax 


«span class-"glyphicon glyphicon-name"»«/span» 


» Examples 


«p»Envelope icon: «span class="glyphicon glyphicon-envelope"»«/span»«/p» Envelope icon: % 


«p»Search icon: «span class-"glyphicon glyphicon-search"»«/span»«/p» Search icon: Q 


«p»Search icon on a styled button: 
«button type-"button" class-"btn btn-info"> 


«span class-"glyphicon glyphicon-search"»«/span» Search — l 
</button> 


</p> 


Resizing Glyphicons 


» Glyphicons are text!!! 
» Το resize glyphicons, simply increase its font size in CSS! 


» Example 


«style» 
.features .glyphicon [ 
font-size: 32px; 
} 
</style> 


> Output 


With font-size: 32px = 


With font-size: 14px $ 


<body> 
<div class="container"> 
<div class="row features"> 
<p>With font-size: 32px <span class="glyphicon glyphicon-briefcase"></span></p> 
</div> 
<div class="row"> 
<p>With font-size: 14bx <span class-"glyphicon glyphicon-briefcase"></span></p> 
</div> 
</div> 


</body> 


Forms 


» Automatically applies some global styling with Bootstrap. 


» Examples 


| Text input 


Textarea 


(3 Option one is this and that—be sure to include why it's great 


Option two is disabled 


© Option one is this and that—be sure to include why it's great 
O Option two can be something else and selecting it will deselect option one 
Option three is disabled 


Forms 


» Layouts supported by Bootstrap 
» Vertical Form 
» Horizontal Form 


» Inline Form 


» Tips on using forms with Bootstrap 
» «form role-“form"> Improves accessibility 
» «div class=“form-group”» Improves spacing of form elements 


» .form-control Give width of 10076 to text form elements 


Forms - Vertical Layout 


Email: 


| Enter email 


Password: 


| Enter password 


LJ Remember me 


| Submit | «form role="Kor 
— .᾿. <div class= 


«label for= email"»Email address:«/label» 
«input type="email" class= form-controH id="email"» 
«/div» 


«div class="form-group"» 
«label for="pwd"»Password: «/label» 
<input type="password" class="form-control" id-"pwd"» 
«/div» 
«div class="checkbox"» 
«label»«input type="checkbox"» Remember me«/label» 
«/div» 
«button type="submit" class="btn btn-default"»Submit«/button» 
</form> 


Forms - Horizontal Layout 


Email: | Enter email 


Password: | Enter password 


O Remember me 


| Submit | 


«form class-" role="form"» 
«div class="form-gpoup 
«label class-'Eontrol-label col-sm-2' for="email"»Email:«/label» 
<div class="col-sm-T8 
<input type="email" class-'form-control' id="email" placeholder-'Enter email"» 
</div> 
</div> 
<div class="form-group"» 
«label class="control-label col-sm-2" for-"pwd"»Password:«/label» 
«div class="col-sm-10"» 
<input type="password" class="form-control" id-'pwd' placeholder="Enter password" > 
«/div» 
«/div» 


Forms - Inline Layout 


Email: | Enter email | Password: 


Enter password O Remember me. Submit | 


<form class» (fori nrs) role="form"» 
«div class-"form-group"» 


«label for-"email"»Email address:«/label» 

«input type-"email" class-"form-control" id-"email"» 
«/div» 
«div class="form-group"» 

«label for="pwd">Password:</label> 

<input type="password" class-"form-control" id-"pud" > 
«/div» 
«div class-"checkbox"» 

«label»«input type-"checkbox"> Remember me</label> 
«/div» 
«button type="submit" class-"btn btn-default"»Submit«/button» 

«/form» 


Forms - Controls 


Supports HTML form elements 
<input> 


<textarea> 


<input type="radio”> 


p 
p 
» <input type=“checkbox”» 
> 
» «select» 

p 


Forms - Validation states 


» Bootstrap allows you to give validation status to your form elements. 


» Bootstrap supports 


Input with success 


ΠΡΙ a 


> .has-error Input with warning 


p chassuccess [ J 


» Exam ple Input with error 
G Checkbox with success 
(J Checkbox with warning 
© Checkbox with error 


Validation States - Input 


Input with success 


Cd 


Input with warning 


L Ef 


Input with error 


A 


<div class-'form-group (Fas-success)» 
«label class="control-label" for="inputSuccess1"»Input with success«/label» 


«input type="text" class-"form-control" id-"inputSuccess1" > 
</div> 


<div classe form-grow((Tas-varnin)» 
«label class="control-labt Sr-"inputWarningl"»Input with warning</label> 


«input type-"text" class-"form-control" id-"inputWarningl"» 


«/div» 
«div classe fora group (bos error > 
«label class-'control-label' for-"inputErrori"»Input with error«/label» 


«input type="text" class="form-control" id-"inputError1"> 
«/div» 


Forms - Validation states with icons 


To add feedback icons 
1. add has-feedback class to parent 


2. insert <span> specifying glyphicon for the controls feedback 


<span class="glyphicon glyphicon-ok form-control-feedback"></span> 


EXAMPLE 


Input with success 


Input with warning 


Input with error 


ο ο ο ο ο ο ο ο ο 0) 


Validation states with Icons 


Input with success 


«div class-"form-group has-success [has-feedback\> 
<label class="control-label" for="inputSuccess2">Input with success</label> 


ut type="text" class="form-cop T 


id-"inputSucce ibedby="inputSuccess2Status"» 
«span class="glyphicon glyphicon-ok form- Eel feedback" aria-hidden="true”></spany 
«span 1d= inputSuccess2Status" class-"sr-only">(success)</span> 
«/div» 


Pagination 


» You can use Bootstrap to divide your website into pages. 


EXAMPLE 


Simply add pagination class to ul element. <ul class="pagination"> 
Each page is a list of href element. e.g. <li><a href="#">1</a></li> 


Use pagination-lg or pagination-sm to size page button sizes 


Example - Pagination 


<ul class=1pagination)» 

«li» 

«a href="4" aria-label="Previous"» 

«span aria-hidden-"true"»&laquo;«/span» 

«/a» 
«/li» 
<li><a href-"#">1</a></li 
<li><a href="#">2</a></li 
<li><a href="#">3</a></li 
<li><a href-"#">4</a></li> 
li»«a href="i"»5«/a»«/li» 


<a href="#" aria-label="Next"» 
«span aria-hidden="true">&raquo;</span> 
«/a» 
«/li» 
«/ul» 


Pager 


Simpler version with “Previous” or “Next” buttons 


EXAMPLE 


Previous Next 


«ul class="pager"» 
<li><a href-"#">Previous</a></li> 
<li><a href-"#">Next</a></li> 
«/ul» 


You can also align buttons using .previous and .next 


EXAMPLE 


+ Older Newer — 


<ul class="pager"> 
«li class-"previous"»«a href="#">&larr; Older«/a»«/li» 
«li class-"next"»«a href-"#">Newer &rarr;«/a»«/li» 
«/ul» 


Navigation (nav) 


| Home Profile Messages Home Profile Messages 


Navigation Bar (navbar) 


Brand Home 


Navigation (nav) 


» Use unordered list and give .nav class attribute. 


» Example 


Page 1 Page 2 Page 3 


Makes navigation inline 


<div> 
<ul class-'(naV)navbar-nav"» 
«li class="active"»«a href+"#">Home</a></li> 
«li»«a href-"#">Page 1</a></li> 
«li»«a href-"#">Page 2«/a»«/li» 
«li»«a href-"#">Page 3«/a»«/li» 
«/ul» 
«/div» 


«ul class-'nav nav-pills >...</ul> Tickets Stations — About 


«ul class= "nav nav-tabs >...</ul> Tickets Stations About 


«ul class= "nav navbar-nav navbar-right '»...«/ul» 


Stations 


Right aligned 


Navigation Bar (.navbar) 


> Creates a visible bar with navigation elements. 


» Example 


WebSiteName Home  Pagei  Page2  Page3 


«body» 
«nav class-(navba) » 
«div class-'Tontainer-fluid 


«div class="navbar-header"» 
«a class="navbar-brand" href="#">WebSiteName</a> 
«/div» 
«div» 
«ul class="nav navbar-nav"» 
«li class="active"»«a href-"#">Home</a></li> 
«li»«a href-"#">Page 1</a></li> 
«li»«a href-"#">Page 2«/a»«/li» 
«li»«a href-"#">Page 3«/a»«/li» 
«/ul» 
«/div» 
«/div» 
«/nav» 


.havbar-default 


Blasting Off With Bootstrap Tickets ^ Stations ^ About 


.havbar- inverse 


„navbar-static-top „navbar-static-bottom 


„navbar-fixed-top [M .navbar-fixed-bottom Bnd Othe ts 


There are still many more to learn! 


> Go over http://getbootstrap.com/getting-started/#examples 
> Playground for bootstrap http://www.bootply.com/ 


